<template>
    <div id="button">
        
        <!-- {{sum}} -->
        {{result}}
        <button @click="onClick">点击</button>
        <span>{{watchValue}}</span>
        <span>{{watchUser.name}}</span>

    </div>
</template>

<script>
export default {
    // 用来定义组件接受的数据
    props:{
        title:{
            type:String,
            required:true,
            // default:"11111",
            validator:function(value){
                return value.length < 6;
            }
        }
    },
    data() {
        return {
            num1:1,
            num2:3,
            sum:0,
            watchValue:1,
            watchUser:{
                name:"杨克强",
                age:10,
                friends:[
                    {
                        name:"沈书生"
                    },
                    {
                        name:"姜江江"
                    }
                ],
                hobby:{
                    name:"学习",
                    status:24
                }
            }
        }
    },
    mounted() {
        // this.sum = this.num1+this.num2;
    },
    methods: {
        onClick(){
            // this.num1++;
            // this.watchValue = 10;
            // this.num1 = 10;
            // this.sum = this.num1+this.num2;
            this.watchUser.name = "张彬彬";
            // this.watchUser.hobby.status = 2;
        },
        valueChangeHandle(newValue,oldValue){
            console.log("监听属性被触发")
            console.log("newValue:",newValue);
            console.log("oldValue:",oldValue);
        }
    },
    // 1、参与计算的属性必须是定义到data的属性
    // 2、只有参与计算的属性发生变化，计算属性才会被触发
    computed: {
        result:function(){
            console.log("计算属性默认会被调用");
            var temp = 10;
            return this.num1+temp;
        }
    },
    watch: {
        // watchValue:function(newValue,oldValue){
        //     console.log("监听属性被触发")
        //     console.log("newValue:",newValue);
        //     console.log("oldValue:",oldValue);
        // }

        // watchValue:"valueChangeHandle"

        // watchValue:{
        //     handler:"valueChangeHandle",
        //     immediate:true   // 组件被加载后默认触发
        // }

        // watchValue:[
        //     // "valueChangeHandle",
        //     function handle1(newValue,oldValue){
        //         newValue = 1000;
        //         console.log("监听属性触发handle1");
        //         console.log("newValue:",newValue);
        //         console.log("oldValue:",oldValue);
        //     },
        //     function handle2(newValue,oldValue){
        //         console.log("监听属性触发handle2");
        //         console.log("newValue:",newValue);
        //         console.log("oldValue:",oldValue);
        //     },
        //     function handle3(newValue,oldValue){
        //         console.log("监听属性触发handle3");
        //         console.log("newValue:",newValue);
        //         console.log("oldValue:",oldValue);
        //     },
        // ]

        // watchUser:function(newValue,oldValue){
        //     console.log("监听属性触发");
        //     console.log("newValue:",newValue);
        //     console.log("oldValue:",oldValue);
        // }

        // watchUser:{
        //     handler:function(newValue,oldValue){
        //         console.log("监听属性触发");
        //         console.log("newValue:",newValue);
        //         console.log("oldValue:",oldValue);
        //     },
        //     deep:true
        // }

        'watchUser.name':function(newValue,oldValue){
            console.log("监听属性触发");
            console.log("newValue:",newValue);
            console.log("oldValue:",oldValue);
        }
    },
}
</script>

<style lang="scss" scoped>
#button{
    width:200px;
    padding:10px;
    border:1px solid red;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
</style>